<template>
  <div class="contentWrap">
    <div class="boxTop">
      <van-row style="height: 100%" type="flex" align="center">
        <van-col span="4">设备</van-col>
        <van-col span="8">烟感</van-col>
        <van-col span="3"><div style="display: flex; align-items: center"><icon name="stop" color="#FC5A69" size="30" /></div></van-col>
        <van-col span="9">异常</van-col>
      </van-row>
    </div>
    <div class="box">
      <van-row>
        <van-col span="8">
          <div class="title">
            告警编号
          </div>
        </van-col>
        <van-col span="16">
          <div class="content red">
            GJ20200901135901
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            告警地址
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            广场右侧
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            告警时间
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            2020-09-01 12:12:12
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            责任人
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            张三 13800000000
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            处置时间
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            获取系统当前时间
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            处置人员
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            获取系统当前登录用户
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            处理状态
          </div>
        </van-col>
        <van-col span="16">
          <div>
            <field
                right-icon="arrow-down"
                readonly
                clickable
                name="picker"
                :value="state"
                label=""
                placeholder="选择状态"
                @click="showPickerState = true"
            />
            <popup v-model="showPickerState" position="bottom">
              <picker
                  show-toolbar
                  :columns="columnsState"
                  @confirm="onConfirmState"
                  @cancel="showPickerState = false"
              />
            </popup>
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            处理备注
          </div>
        </van-col>
        <van-col span="16">
          <div class="textArea">
            <field
                v-model="remark"
                rows="3"
                autosize
                label=""
                type="textarea"
                placeholder="请输入内容"
            />
          </div>
        </van-col>
      </van-row>

      <!-- <van-row>
        <van-col span="8">
          <div class="title">
            照片上传
          </div>
        </van-col>
        <van-col span="16">
          <div class="upload">
            <uploader :after-read="afterRead">
              <van-button type="primary">点击上传</van-button>
            </uploader>
          </div>
        </van-col>
      </van-row> -->

      <van-row class="btnWrap">
        <van-button type="primary">提 交</van-button>
      </van-row>
    </div>
  </div>
</template>

<script>
import { Col, Row, Field, Popup, Picker, Uploader, Button, Icon } from 'vant'
export default {
  name: 'overview',
  components: {
    VanCol: Col,
    VanRow: Row,
    Field,
    Popup,
    Picker,
    Uploader,
    VanButton: Button,
    Icon
  },
  data () {
    return {
      state: '',
      remark: '',
      columnsState: ['已完成', '未完成'],
      showPickerState: false
    }
  },
  mounted () {
    this.$store.commit('setTopBg', 'red-bg')
  },
  methods: {
    onConfirmState (value) {
      this.state = value
      this.showPickerState = false
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    }
  }
}
</script>

<style lang="scss" scoped>
  .contentWrap {
    width: 100%;
    box-sizing: border-box;
    padding: 25px 5%;
    .boxTop {
      width: 100%;
      height: 50px;
      background: #ffffff;
      box-shadow: 0px 1px 2px 0px #cccccc;
      border-radius: 5px;
      padding: 10px 5%;
      box-sizing: border-box;
      margin-bottom: 20px;
    }
    .box {
      width: 100%;
      height: 100%;
      background: #ffffff;
      box-shadow: 0px 1px 2px 0px #cccccc;
      border-radius: 5px;
      padding: 20px 5%;
      box-sizing: border-box;
      .van-row {
        margin-bottom: 25px;
      }
      .title {
        font-size: 15px;
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 500;
        color: #666666;
      }
      .content {
        font-size: 15px;
        font-family: PingFang SC Bold, PingFang SC Bold-Bold;
        font-weight: 700;
        color: #333333;
      }
      .red {
        color: #FC5A69;
      }
    }
  }
  .van-cell {
    box-sizing: border-box;
    width: 60%;
    padding: 0 0 0 5px;
    border: 2px solid #fc5a69;
    border-radius: 10px;
    /deep/ .van-field__right-icon {
      margin-right: 1%;
      color: #FC5A69;
    }
  }
  .textArea  {
    .van-cell {
      box-sizing: border-box;
      width: 80%;
    }
  }
  .upload {
    width: 100%;
    /deep/ .van-uploader {
      width: 100%;
      .van-uploader__input-wrapper {
        width: 100%;
      }
      .van-button--normal {
        border: 2px solid #fc5a69;
        border-radius: 10px;
        color: #666666;
        background: transparent;
        width: 80%;
        height: 80px;
      }
    }
  }
  .btnWrap {
    text-align: center;
    .van-button--normal {
      width: 90%;
      background: linear-gradient(#ff89a5 0%, #fc5a69 100%);
      box-shadow: 0px 1px 2px 0px #d93e3e;
      border: none;
      border-radius: 20px;
    }
  }
</style>
